<template>
    <div>
        <Modal v-model="data.isShow" width="400" :mask-closable="false">
            <p slot="header" class="header-view">新建预定</p>
			<div class="main-view">
                <Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="100">
                    <FormItem label="手机号：" prop="phoneNum">
                        <div style="display: flex;">
                            <Input v-model="data.data.phoneNum" :maxlength="11" class="input"  placeholder="请输入手机号" style="margin-right: .1rem;"></Input>
                            <Button type="primary" class="btn" @click="clickQuery">查询</Button>
                        </div>
                    </FormItem>
                    <FormItem label="姓名：" prop="name">
                        <Input v-model="data.data.name" class="input" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="预定时间：" prop="startTime">
                        <DatePicker 
                            type="datetime" 
                            format="yyyy-MM-dd HH:mm:ss" 
                            placeholder="请选择预定时间"
                            :options="options"
                            class="input"
                            style="width: 100%"
                            @on-change="changeStartTime">
                        </DatePicker>
                    </FormItem>
                    <FormItem label="预定时长：" prop="hours">
                        <InputNumber :min="0" v-model="data.data.hours" class="input" placeholder="预定时长"></InputNumber>小时
                    </FormItem>
                    <FormItem label="人数：" prop="number">
                        <InputNumber :min="0" v-model="data.data.number" placeholder="人数"></InputNumber>
                    </FormItem>
                    <FormItem label="预定类型：" prop="bookType">
                        <RadioGroup v-model="data.data.bookType">
                            <Radio label="0">
                                <span>点播厅</span>
                            </Radio>
                            <Radio label="1">
                                <span>同步厅</span>
                            </Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="预约影片：" prop="moive" v-if="data.data.bookType == '1'">
                        <Input v-model="data.data.moive" class="input" placeholder="预约影片"></Input>
                    </FormItem>
                    <FormItem label="影片时长：" prop="mins" v-if="data.data.bookType == '1'">
                        <Input v-model="data.data.mins" class="input" placeholder="影片时长"></Input>
                    </FormItem>
                    <FormItem label="预定来源：" prop="source">
                        <RadioGroup v-model="data.data.source">
                            <Radio label="0">
                                <span>电话预约</span>
                            </Radio>
                            <Radio label="1">
                                <span>到店预约</span>
                            </Radio>
                        </RadioGroup>
                    </FormItem>
                </Form>
			</div>
            <div slot="footer">
				<Button type="primary" @click="clickSubmit">预定</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
        </Modal>
    </div>
</template>

<script>
var phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
import roomService from '@/network/service/roomService.js'
    export default {
        props: ['data'],
        data() {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    startTime: [
                        { required: true, message: '请选择预定开始时间', trigger: 'change', type: 'string' }
                    ],
                    hours: [
                        { required: true, message: '请输入预定时长', trigger: 'blur', type: 'number' }
                    ],
                    number: [
                        { required: true, message: '请输入预定人数', trigger: 'blur', type: 'number' }
                    ],
                    bookType: [
                        { required: true, message: '请选择预定类型', trigger: 'change', type: "string" }
                    ],
                    source: [
                        { required: true, message: '请选择预定来源', trigger: 'change', type: "string" }
                    ],
                    phoneNum: [
                        { required: true, message: '请输入新手机号', trigger: 'blur' },
                        { pattern: phoneReg, message: '请正确输入手机号', trigger: 'blur' }
                    ],
                },

            }
        },
        methods: {
            clickQuery() {
                this.getUserInfoByTel();
            },
            changeStartTime(val) {
                this.data.data.startTime = val;
            },
            clickSubmit() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },

            getUserInfoByTel() {
                roomService.getUserInfoByTel(this.data.data.phoneNum).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        this.data.data.isMember = 1
                        this.data.data.memberId = result.data.uid;
                        this.data.data.name = result.data.name;
                        this.$Message.info('该手机号是会员');
                    } else if (code == 106) {
                        this.data.data.isMember = 0;
                        this.$Message.info(resmsg);
                    } else {
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    this.$Message.error('服务器异常，请稍后再试');
                })
            }
        }
    }
</script>

<style scoped>
.header-view {
	text-align: center;
	font-size: .14rem;
	color: #433E41;
}
.input {
    border: 1px solid #D5CED2;
    border-radius: 5px;
    color: #433e41;
}
</style>